<template>
  <div class="dashboard-container">
    <!-- 卡片布局 -->
    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="8">
        <div class="card">
          <div class="card-title">总帖子数量</div>
          <div class="card-data">{{ dashboardStats.postCount }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="card-title">用户总人数</div>
          <div class="card-data">{{ dashboardStats.userCount }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="card-title">今日新增帖子</div>
          <div class="card-data">{{ dashboardStats.newPostsToday }}</div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表布局 -->
    <el-row :gutter="20" class="dashboard-charts">
      <el-col :span="12">
        <div class="chart" ref="userChart"></div>
      </el-col>
      <el-col :span="12">
        <div class="chart" ref="postChart"></div>
      </el-col>
    </el-row>

    <!-- 新增图表布局 -->
    <el-row :gutter="20" class="dashboard-charts">
      <el-col :span="12">
        <div class="chart" ref="userDistributionChart"></div>
      </el-col>
      <el-col :span="12">
        <div class="chart" ref="activityRadarChart"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  dashboardData,
  getUserTrend,
  getPostTrend,
  getUserAgeGroup,
  getActiveIndicators,
} from "@/api/echarts";
import * as echarts from "echarts";

export default {
  name: "Dashboard",
  data() {
    return {
      dashboardStats: {
        newPostsToday: 0,
        userCount: 0,
        postCount: 0,
      },
      userTrend: [],
      postTrend: [],
      userAgeGroup: [],
      activeIndicators: {},
    };
  },
 mounted() {
  this.fetchDashboardData();
  this.fetchUserTrend();
  this.fetchPostTrend();
  this.fetchUserAgeGroup();
  this.fetchActiveIndicators();
},
watch: {
  userTrend(newData) {
    if (newData.length > 0) {
      this.userChart();
    }
  },
  postTrend(newData) {
    if (newData.length > 0) {
      this.postChart();
    }
  },
  userAgeGroup(newData) {
    if (newData.length > 0) {
      this.userAgeGroupChart();
    }
  },
activeIndicators(newData) {
  // 判断 newData 是否为非空对象
  if (Object.keys(newData).length > 0) {
    this.activeIndicatorsChart();
  }
}
},
methods: {
  async fetchDashboardData() {
    try {
      const response = await dashboardData();
      this.dashboardStats = response.data;
    } catch (error) {
      console.error("获取仪表盘数据失败:", error);
    }
  },
  async fetchUserTrend() {
    try {
      const response = await getUserTrend();
      this.userTrend = response.data;
    } catch (error) {
      console.error("获取用户增长趋势失败:", error);
    }
  },
  async fetchPostTrend() {
    try {
      const response = await getPostTrend();
      this.postTrend = response.data;
    } catch (error) {
      console.error("获取帖子发布趋势失败:", error);
    }
  },
  async fetchUserAgeGroup() {
    try {
      const response = await getUserAgeGroup();
      this.userAgeGroup = response.data;
    } catch (error) {
      console.error("获取用户年龄分组失败:", error);
    }
  },
  async fetchActiveIndicators() {
    try {
      const response = await getActiveIndicators();
      this.activeIndicators = response.data;
    } catch (error) {
      console.error("获取活跃指标失败:", error);
    }
  },
  userChart() {
    // 准备用户增长趋势图的数据
    const userTrendData = this.userTrend.map((item) => item.count);
    const userTrendCategories = this.userTrend.map((item) => item.weekday);
    const userChart = echarts.init(this.$refs.userChart);
    userChart.setOption({
      title: { text: "用户增长趋势", left: "center" },
      xAxis: {
        type: "category",
        data: userTrendCategories,
      },
      yAxis: { type: "value" },
      series: [
        {
          name: "新增用户",
          type: "line",
          data: userTrendData,
        },
      ],
    });
  },
  postChart() {
    const postChartData = this.postTrend.map((item) => item.count);
    const postChartCategories = this.postTrend.map((item) => item.weekday);
    const postChart = echarts.init(this.$refs.postChart);
    postChart.setOption({
      title: { text: "帖子发布情况", left: "center" },
      xAxis: {
        type: "category",
        data: postChartCategories,
      },
      yAxis: { type: "value" },
      series: [
        {
          name: "新增帖子",
          type: "bar",
          data: postChartData,
        },
      ],
    });
  },
  userAgeGroupChart() {
    const userAgeGroupData = this.userAgeGroup.map((item) => item.count);
    const userAgeGroupCategories = this.userAgeGroup.map((item) => item.age);
    const userDistributionChart = echarts.init(this.$refs.userDistributionChart);
    userDistributionChart.setOption({
      title: { text: "用户年龄段分布", left: "center" },
      tooltip: { trigger: "axis" },
      xAxis: {
        type: "category",
        data: userAgeGroupCategories,
      },
      yAxis: { type: "value" },
      series: [
        {
          name: "用户数量",
          type: "bar",
          data: userAgeGroupData,
        },
      ],
    });
  },
  activeIndicatorsChart() {
    const activeIndicatorsData = [
      this.activeIndicators.loveCount,
      this.activeIndicators.collectCount,
      this.activeIndicators.postCount,
      this.activeIndicators.commentCount,
    ];
    const activityRadarChart = echarts.init(this.$refs.activityRadarChart);
    activityRadarChart.setOption({
      title: { text: "活跃指标分析", left: "center" },
      tooltip: {},
      radar: {
        center: ["50%", "55%"],
        radius: "70%",
        indicator: [
           { name: "点赞数", max: 25 },  // 修改最大值，根据数据规模设置
          { name: "收藏数", max: 25 },
          { name: "帖子数", max: 25 },
          { name: "评论数", max: 150 },
        ],
      },
      series: [
        {
          name: "活跃指标",
          type: "radar",
          data: [
            {
              value: activeIndicatorsData,
              name: "本周活跃",
            },
          ],
        },
      ],
    });
  }
}

};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .dashboard-cards {
    margin-bottom: 20px;

    .card {
      background-color: #f5f5f5;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      text-align: center;

      .card-title {
        font-size: 16px;
        color: #888;
        margin-bottom: 10px;
      }

      .card-data {
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }
    }
  }

  .dashboard-charts {
    .chart {
      margin-bottom: 10px;
      height: 400px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
